<template>
	<el-dialog width="30%" @close="closed" :title="$t('msg.excel.title')" :model-value="modelValue">
		<el-input v-model="excelName" :placeholder="$t('msg.excel.placeholder')"></el-input>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closed">{{$t('msg.excel.close')}}</el-button>
				<el-button type="primary" @click="onConfirm" :loading="loading">{{$t('msg.excel.confirm')}}</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue'

	import {
		useI18n
	} from 'vue-i18n'

	import {
		watchSwitchLang
	} from '@/utils/i18n'

	import {
		getUserManageAllList
	} from '@/api/user-manage'

	import {
		USER_RELATIONS
	} from './Export2ExcelConstants'

	import {
		dateFilter
	} from '@/filter'

	defineProps({
		modelValue: {
			type: Boolean,
			required: true
		}
	})

	const emits = defineEmits(['update:modelValue'])

	// 导出文件名
	const i18n = useI18n()
	let exportDefaultName = i18n.t('msg.excel.defaultName')
	const excelName = ref('')
	excelName.value = exportDefaultName
	watchSwitchLang(() => {
		exportDefaultName = i18n.t('msg.excel.defaultName')
		excelName.value = exportDefaultName
	})

	const closed = () => {
		emits('update:modelValue', false)
	}


	// 点击确定按钮
	const loading = ref(false)
	const onConfirm = async () => {
		loading.value = true

		const allUser = (await getUserManageAllList()).list

		const data = formatJson(USER_RELATIONS, allUser)

		// 动态导入工具包
		const excel = await import('@/utils/Export2Excel')

		excel.export_json_to_excel({
			// excel 表头
			header: Object.keys(USER_RELATIONS),
			// excel 数据（二维数组结构）
			data,
			// 文件名称
			filename: excelName.value || exportDefaultName,
			// 是否自动列宽
			autoWidth: true,
			// 文件类型
			bookType: 'xlsx'
		})

		loading.value = false
		closed()
	}

	// 二维数组
	const formatJson = (headers, rows) => {
		return rows.map(item => {
			return Object.keys(headers).map(key => {

				// 角色需要进行特殊处理
				if (headers[key] === 'role') {
					const roles = item[headers[key]]
					return JSON.stringify(roles.map(role => role.title))
				}

				// 时间的处理
				if (headers[key] === 'openTime') {
					return dateFilter(item[headers[key]])
				}

				return item[headers[key]]
			})
		})
	}
</script>

<style lang="scss">
</style>
